<script setup>
import { ref, watch } from 'vue'

/*
watch:侦听器
作用：侦听数据（响应式数据）变化后执行某事件（某数据的change事件）
用法：
a:基本使用
   1：导入  import {watch} from 'vue'
   2:使用
     const stop=watch(需要侦听的数据,(newVal,oldVal)=>{
      newVal:修改后的值
      oldVal:修改前的值
     },{
      配制:
      deep:是否深度侦听,
      immediate:是否立马执行回调,
      flush:控制执行回调函数的时机（渲染前还是渲染后）
         pre:默认值（渲染前执行）
         post:渲染后执行
         sync:修改一次侦听的数据就执行一次回调（渲染前）
     })
   stop:停止侦听的方法



b:watch侦听多个数据变化 
  
用法：
   const stop=watch([需要侦听的数据,需要侦听的数据2],(newVal,oldVal)=>{

   },{
    配制
   })




*/
const count = ref(4)
const add = () => {
  count.value++
}
// 1:基本使用
// const stop = watch(
//   count,
//   (newVal, oldVal) => {
//     if (newVal >= 5) {
//       console.log('当前count大于五了')
//     }
//   },
//   {
//     immediate: true
//   }
// )
const num = ref(999)
// 2:侦听多个数据变化
// const stop = watch([count, num], (newVal, oldVal) => {
//   console.log(newVal, oldVal)
// })
// 3:侦听响应式数据中某个属性的变化
// const stop=watch(()=>{return 相应属性的值},.....)
const userinfo = ref({
  name: '张三',
  age: 18
})

const stop = watch(
  () => userinfo.value.age,
  newVal => {
    console.log(document.getElementById('age').innerHTML)
    console.log('年龄', newVal)
  },
  {
    flush: 'sync'
  }
)
const addAge = () => {
  userinfo.value.age++
  userinfo.value.age++
}

/*
总结watch:
和vue2的watch变化 
  1：watch返回了一个停止侦听的方法
  2：watch在vue3可以侦听多个数据的变化
  3:当侦听响应式数据中某个属性变化 watch(()=>数据.属性,....)
  4:新增一个配制flush
       flush:'pre' 渲染前执行回调
             'post' 渲染后执行回调
             'sync'修改一次执行一次回调，每次都是渲染前执行


const stop=watch(
  第一个参数: 响应式数据,[响应式数据a,响应式数据b],()=>响应式数据.属性..
  第二个参数:(newVal,oldVal)=>{newVal:当前值,oldVal:修改前的值},
  第三个参数：{
        deep:是否深度侦听,
        immediate:是否立马执行回调,
        flush:
           pre:渲染前
           post:渲染后
           sync:修改一次执行一次回调(渲染前)
  }


)




*/
</script>

<template>
  <div class="page">
    <h2>{{ count }}</h2>
    <button @click="add">修改count</button>
    <button @click="stop">停止侦听</button>
    <hr />
    <h2>{{ num }}</h2>
    <button @click="num++">修改num</button>
    <hr />
    <h2 id="age">{{ userinfo.age }}</h2>
    <button @click="userinfo.age++">修改age</button>
    <button @click="addAge">修改age</button>
  </div>
</template>

<style scoped></style>
